<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQT.Floaty</title>
        <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
        <script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="../../extensions/jqt.floaty.js" type="application/x-javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                slideSelector: '.slide'
            });

            $(function(){
                
                $('#togglefloaty').click(function(){
                    $('.floaty').toggleFloaty();
                    $(this).removeClass('active');
                    return false;
                });

                $('#hidefloaty').click(function(){
                    $('.floaty').hideFloaty();
                    $(this).removeClass('active');
                    return false;
                });
                
                $('.floaty').makeFloaty({
                    spacing: 20,
                    time: '1s'
                });

            });
        </script>
        <style type="text/css" media="screen">
            .floaty {
                -webkit-border-radius: 10px;
                -webkit-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
                width: 90%;
                margin: 0 5%;
                padding: 5px 10px;
                background: rgba(255,255,255,.7);
                color: #000;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <ul class="edgetoedge">
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
                <li>Dummy Data</li>
            </ul>
            <ul class="individual">
                <li><a href="#" id="hidefloaty">Hide Floaty</a></li>
                <li><a href="#" id="togglefloaty">Toggle Floaty</a></li>
            </ul>
        </div>
        <div id="page2">
            <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
                Pretty smooth, eh?            
            </div>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
        </div>
        <div class="floaty">
            I&#8217;m the Floaty bar!<br />
            Testing multiple lines<br />
            Should be flexible.
        </div>
    </body>
</html>